<template>
  <div class="changeinfo">
    <van-nav-bar
      title="修改账号密码"
      left-text="返回"
      right-text="Mine"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="title">
      <div class="images">
        <img :src="user.avatar" alt="" />
      </div>
      <p>{{ user.userName }}</p>
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="oldPassword"
        name="oldPassword"
        label="旧密码"
        placeholder="请填写旧密码"
        :rules="[{ required: true, message: '请填写旧密码' }]"
      />
      <van-field
        v-model="password"
        name="password"
        label="新密码"
        placeholder="请填写新密码"
        :rules="[{ required: true, message: '请填写新密码' }]"
      />
      <van-field
        v-model="againpassword"
        name="againpassword"
        label="确认新密码"
        placeholder="请确认新密码"
        :rules="[{ required: true, message: '请确认新密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { setuser, getuser } from "@/api/user";
import { Toast } from "vant";

export default {
  data() {
    return {
      oldPassword: "",
      password: "",
      againpassword: "",
      user: {},
    };
  },
  computed: {},
  watch: {},

  methods: {
    onClickLeft() {
      this.$router.go(-1);
      Toast("返回");
    },
    onClickRight() {
      this.$router.push("Mine");
      Toast("按钮");
    },
    async onSubmit(val) {
      if (this.password === this.againpassword) {
        let res = await setuser(val);
        console.log(res);
        if (res.code == "success") {
          Toast.success(res.message);
          setTimeout(() => {
            this.$router.replace({
              name: "Login",
            });
          }, 500);
          this.$router.push("login");
        } else {
          Toast.fail(res.message);
        }
      } else {
        Toast("密码必须保持一致");
      }
    },
  },
  async created() {
    let res = await getuser();
    // console.log(res);
    this.user = res;
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.title {
  width: 100%;
  height: 20%;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 1px;
  background-image: linear-gradient(
    180deg,
    rgba(207, 232, 255, 1) 0,
    rgba(207, 232, 255, 1) 0,
    rgba(143, 107, 170, 1) 100%,
    rgba(143, 107, 170, 1) 100%
  );
}
.images {
  width: 100px;
  margin: 0 auto;
}
img {
  width: 100%;
  box-shadow: 50%;
  border-radius: 50%;
}
.title > p {
  text-align: center;
  font-size: 20px;
}
</style>
